var initPicBrowserDOM = function (gallerySelector, opts) {
    var picBrowserSelector = '#pic_browser'
    var slideItemsKeys = [] // 用于存储slide的位置
    var galleryTop
    var galleryThumbs
    var curIndex = 0
    var changeSlideInfo = function () {
        curIndex = this.realIndex
        var curSlider = this.slides[curIndex]
        $(curSlider).find('img').attr('src', $(curSlider).data('url'))
        var $curItem = $(gallerySelector).children('[swipekey="'+slideItemsKeys[curIndex]+'"]')
        var width = $curItem.attr('swipew')
        var ratio = $curItem.attr('swiperatio')
        var height = parseInt(width / ratio)
        var name = $curItem.attr('swipename')
        var camara = $curItem.attr('swipecamara') || '无'
        var shoottime = $curItem.attr('swipeshoottime') || '无'
        var updatetime = $curItem.attr('swipeupdatetime') || '无'
        var size = $curItem.attr('swipesize')
        if(size > 1024 * 1024){
            size = (size/(1024*1024)).toFixed(2)+'M'
        }else if(size > 1024){
            size = (size/(1024)).toFixed(2)+'KB'
        }else{
            size = size+'B'
        }
        $(picBrowserSelector).find('.base-info').html(
            '<p><label>图片名称：</label><span>'+name+'</span></p>' +
            '<p><label>图片尺寸：</label><span>'+width+'x'+height+'</span></p>' +
            '<p><label>图片大小：</label><span>'+size+'</span></p>' +
            '<p><label>修改时间：</label><span>'+updatetime+'</span></p>')
        $(picBrowserSelector).find('.shot-info').html(
            '<p><label>拍摄时间：</label><span>'+shoottime+'</span></p>' +
            '<p><label>相机型号：</label><span>'+camara+'</span></p>')
    }
    var openSlider = function (slideItem) {
        var key = $(slideItem).attr('swipekey')
        for (var i = 0; i < slideItemsKeys.length; i++) {
            if (key === slideItemsKeys[i]) {
                curIndex = i
            }
        }
        $(picBrowserSelector).addClass('show')
        $(picBrowserSelector).removeClass('hide')
        setTimeout(function () {
            galleryThumbs.slideTo(curIndex, 10)
        },0)
    }
    var initSlider = function () {
        // 初始化窗口高度
        var windowW = $(window).width(), windowH = $(window).height()
        var picBoxW = 850
        if (windowW < picBoxW) {
            picBoxW = windowW
        }
        $(picBrowserSelector + ' .box-inner').css('width', picBoxW)
        var $slideItems = $(gallerySelector).children()
        var $galleryTop = $(picBrowserSelector + ' .gallery-top')
        var $galleryThumbs = $(picBrowserSelector + ' .gallery-thumbs')
        var relativeW = $galleryTop.width()
        var relativeH = $galleryTop.height()

        $slideItems.each(function (i, item) {
            if($(item).attr('swipeitem')) {
                var key = $(item).attr('swipekey')
                var src = $(item).attr('swipesrc')
                var width = parseFloat($(item).attr('swipew'))
                var ratio = parseFloat($(item).attr('swiperatio'))
                var height = parseFloat(width / ratio)
                var showW = '', showH = ''
                if (parseFloat(ratio) < 1) { // 高大于宽
                    showH = parseFloat(height) > relativeH ? relativeH : height
                } else {
                    showW = parseFloat(width) > relativeW ? relativeW : width
                }
                $galleryTop.find('.swiper-wrapper').append('<div class="swiper-slide" data-url="'+src+'"><img width="' + showW + '" height="' + showH + '" src="' + src + '?imageMogr2/auto-orient/thumbnail/330x330" alt=""></div>')
                $galleryThumbs.find('.swiper-wrapper').append('<div class="swiper-slide" style="background-image: url(' + src + '?imageMogr2/auto-orient/thumbnail/330x330)"></div>')
                slideItemsKeys.push(key)
            }
        })
        // 初始化操作按钮
        var $optCtn = $(picBrowserSelector).find('.r-info .top-opts')
        for (var i = 0; i < opts.length; i++) {
            $optCtn.append('<a class="opt" data-idx="'+i+'"><i class="iconfont '+opts[i].icon+'"></i><div>'+opts[i].name+'</div></a>')
        }
        $(gallerySelector).on('click', '[swipeitem]', function (e) {
            var eTarget = e.target || e.srcElement;
            if ($(eTarget).closest('[swipeinfo="stopClick"]').length > 0) {
                return
            }
            openSlider(this)
        })
        $(picBrowserSelector + ' .top-opts').on('click', '.opt', function (e) {
            var index = $(this).data('idx')
            if(opts[index] && opts[index].fn && typeof opts[index].fn === 'function'){
                opts[index].fn(slideItemsKeys[curIndex])
            }
        })
        $(picBrowserSelector + ' .close-btn').click(function (e) {
            $(picBrowserSelector).addClass('hide')
            $(picBrowserSelector).removeClass('show')
        })
        galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: false,//修改swiper的父元素时，自动初始化swiper
            navigation: {
                nextEl: '.gallery-top .swiper-button-next',
                prevEl: '.gallery-top .swiper-button-prev',
            },
            on: {
                slideChangeTransitionEnd: changeSlideInfo,
                init: changeSlideInfo
            },
        });
        galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 10,
            centeredSlides: true,
            slideToClickedSlide: true,
            navigation: {
                nextEl: '.thumbs-wrap .swiper-button-next',
                prevEl: '.thumbs-wrap .swiper-button-prev',
            }
        });
        galleryTop.controller.control = galleryThumbs;
        galleryThumbs.controller.control = galleryTop;
        $(picBrowserSelector).addClass('hide')
        $(picBrowserSelector).css('visibility', 'visible')
    }
    initSlider(gallerySelector)
};
